<template>
<view v-if="detailObj">
	<view class="thumb">
		<image mode="aspectFill" :src="detailObj.thumb"></image>
	</view>
	<view class="title">{{detailObj.title}}</view>
	<view class="content">{{detailObj.content}} <text>: {{detailObj.area}}平</text></view>
	<view class="split"></view>
	
	<view class="fixed_view">
			<view class="remain_time" style="visibility: hidden;">（{{detailObj.deadline}}）</view>
			<view @tap="toReserve" :class="'btn apply_btn' + (btnDisabled?' disabled_btn':'')" v-if="isReservable">我要预定</view>
	</view>
	<uni-popup ref="popup" type="bottom">
		<view class="order-detail">
			<view class="form-item">
				<view class="label">*预定日期: </view>
				<view class="form-control">
					<uni-datetime-picker type="date" clearIcon :value="date" @change="selectDate" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">*预定日期: </view>
				<view class="form-control">
					<checkbox-group>
						<label>
					  		 <checkbox color="#24cba9" value="1" :checked="type1Checked" :disabled="type1Disabled" @click="changeTime1"/>上午
					  		</label>
							<label>
							<checkbox color="#24cba9" value="1" :checked="type2Checked" :disabled="type2Disabled" @click="changeTime2"/>下午
					  		</label>
					 </checkbox-group>
				</view>
			</view>
			<view class="action-area">
				<button class="btn" @click="doReserve">提交</button>
			</view>
		</view>
	 </uni-popup>
</view>
</template>

<script module="tools" lang="wxs" src="../../utils/tools.wxs"></script>

<script>
var t = require("../../utils/request.js"),
		config = require("../../utils/config.js").config,
    a = function (t) {
  return t && t.__esModule ? t : {
    default: t
  };
}(require("../../utils/api.js")),
		utils = require("../../utils/util.js"),
    app = getApp();
		
		import {isReserve, getReserve, reserve} from "@/api/reserveManage";

export default {
  data() {
    return {
		date:"",
      id: "",
	  type1Checked:false,
	  type2Checked:false,
	  type1Disabled:true,
	  type2Disabled:true,
      detailObj: null,
      btnDisabled: !1,
			isReservable: true,
			dayType: 'morning',
			reserveDate: '',
			dayTypes: [{
				value: 'morning',
				name: '上午'
			}, {
				value: 'afternoon',
				name: '下午'
			}]
    };
  },
	computed: {
		formatedReserveDate: function() {
			if (this.reserveDate == '') {
				return '请选择日期';
			} else {
				return this.reserveDate;
			}
		}
	},
  components: {},
  props: {},
  onLoad: function (t) {
    this.setData({id: t.id});
		this.getReserve();		
  },
  onPullDownRefresh: function () {
    this.getReserve("refresh");
  },
  onShareAppMessage: function (t) {
    return {
      title: this.detailObj.name,
      path: "/pages/index/index?recruitId=" + this.id,
      imageUrl: this.detailObj.thumb
    };
  },
  methods: {
		updateReserveDate: function(event) {
			this.reserveDate = event.detail.value;
			this.updateReverseBtnStatus();
		},
		updateDayType: function(event) {
			this.dayType = event.detail.value;
			this.updateReverseBtnStatus();
		},
		selectDate(date){

			this.date = date
			var that = this;
			var params = {
				reserveId: this.id,
				reserveDate: date, 
				vid: app.globalData.zyzId,
				type1 :0,
				type2 : 1
			};
			isReserve(params).then((ret=>{
				if(ret.success){
					ret.data.forEach(function(e){
						if(e.type == 0){
							that.type1Disabled = false;
						}
						if(e.type == 1){
							that.type2Disabled = false;
						}
					})
				}
			}))
		},
		doReserve(){
			var that = this;
			var params = {
				reserveId: this.id,
				reserveDate: this.date, 
				vid: app.globalData.zyzId,
			};
			if(this.type1Checked){
				params['type1'] = 0
			}
			if(this.type2Checked){
				params['type2'] = 1
			}
			reserve(params).then((ret=>{
				if(ret.success){
					this.$refs.popup.close()
					uni.navigateTo({
						url: '/pages/reserve/success'
					})
				}else{
					uni.showToast({
						title:ret.message
					})
				}
			}))
		},
		toReserve: function() {
			this.$refs.popup.open('bottom')
		
		},
		changeTime1(e){
			this.type1Checked = !this.type1Checked
		
		},
		changeTime2(e){
			this.type2Checked = !this.type2Checked
			
		},
		updateReverseBtnStatus: function() {
			if (this.reserveDate) {
				var that = this;
				var params = {
					reserveId: this.id,
					reserveDate: this.reserveDate,
				};
				
				if (this.dayType == 'morning') {
					params['type1'] = 0;
				} else if (this.dayType == 'afternoon') {
					params['type2'] = 1;
				}
				
				
			}
			isReserve(params).then((result => {
				that.isReservable = result.success && result.data.length != 0;
			}));
		},
		
		getReserve: function() {
			var that = this;
			getReserve({id: this.id}).then((result => {
				if (result.success) {
					if(result.data.imageUrl){
						result.data.thumb = utils.formatImgUrl(result.data.imageUrl, config.host);
					}
					
					that.detailObj = result.data;
				} else {
					uni.showToast({
						title: result.message,
						duration: 2000,
						icon : 'none'
					});
				}
			}));
		},
  }
};
</script>
<style lang="scss">
	@import '@/common/uni.css';
	
	.order-detail {
		background-color: #fff;
		padding: 114rpx 22rpx 22rpx;
		.form-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 16rpx;
			color: gray;
			height: 80rpx;
			margin-bottom: 60rpx;
			.label {
				margin-right: 43rpx;
				
			}
		}
		.action-area {
			.btn {
				background: #24cba9;
				color: #fff;
			}
		}
	}
	
	.title {
	    padding: 5px 13px;
	}
.thumb {
    position: relative;
    width: 100%;
    height: 450rpx;
    margin-bottom: 40rpx;
}

.thumb image {
    width: 100%;
    height: 100%;
    border: 1rpx solid #e1e2e3;
}

.thumb .tag {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
    min-width: 144rpx;
    height: 48rpx;
    line-height: 48rpx;
    padding: 0 20rpx;
    text-align: center;
    background: #24cba9;
    border-radius: 24rpx;
    font-size: 28rpx;
    color: #fff;
}

.title {
    width: 100%;
    height: auto;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
}

.time_num {
    justify-content: space-between;
    padding: 0 30rpx 40rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.time_num .time {
    flex: auto;
    font-size: 24rpx;
    color: #333;
}

.time_num .over {
    display: inline-block;
    width: 76rpx;
    height: 32rpx;
    line-height: 32rpx;
    margin-left: 6rpx;
    vertical-align: middle;
}

.time_num .num {
    flex: none;
    font-size: 24rpx;
    color: #333;
}

.time_num .num text {
    color: #24cba9;
}

.desc_item {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    justify-content: flex-start;
}

.desc_item .icon {
    flex: 0 0 40rpx;
    width: 40rpx;
    height: 40rpx;
    margin: 0 30rpx;
}

.desc_item view {
    position: relative;
    flex: auto;
    height: 100rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.desc_item view text {
    display: inline-block;
    width: 550rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.desc_item view .arr {
    width: 10rpx;
    height: 15rpx;
}

.desc_item view .arr,.desc_item view .fun_icon {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
}

.desc_item view .fun_icon {
    width: 36rpx;
    height: 36rpx;
}

.content {
    width: 100%;
    height: auto;
    padding: 40rpx 30rpx;
}

.content .tit {
    margin-bottom: 40rpx;
    font-size: 30rpx;
    font-weight: 500;
}

.content .tit .sub {
    position: relative;
    top: -15rpx;
    margin-left: 10rpx;
    font-size: 24rpx;
}

.content .tit .more {
    float: right;
    font-size: 24rpx;
    color: #333;
}

.content .tit .more image {
    width: 10rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.content .border_sec {
    position: relative;
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #fafffe;
    box-shadow: 0rpx 4rpx 12rpx 0rpx hsla(0,0%,88.2%,.5);
    border-radius: 20rpx;
    border: 1rpx solid #24cba9;
}

.border_sec .quot {
    position: absolute;
    top: -16rpx;
    right: 30rpx;
    display: block;
    width: 32rpx;
    height: 26rpx;
}

.content .no_data {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 0;
}

.content .no_data image.no_data1 {
    display: block;
    width: 72rpx;
    height: 76rpx;
    margin: 0 auto 15rpx;
}

.content .no_data image.no_data2 {
    display: block;
    width: 80rpx;
    height: 72rpx;
    margin: 0 auto 15rpx;
}

.content .no_data text {
    font-size: 24rpx;
    color: #999;
}

.content rich-text img {
    width: 100%;
    height: auto;
}

.pad_bottom {
    width: 100%;
    height: 158rpx;
    background: #f4f4f4;
}

.fixed_view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 148rpx;
    background: #fff;
    box-shadow: 0rpx -10rpx 20rpx 0 rgba(0,0,0,.05);
}

.fixed_view .remain_time {
    padding: 16rpx 0;
    text-align: center;
    font-size: 20rpx;
    color: #666;
}

.fixed_view .btn {
    width: 92%;
    height: 80rpx;
    margin: 0 auto;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #fff;
}

.fixed_view .btn.apply_btn {
    background: #24cba9;
}

.vols_wrapper {
    justify-content: flex-start;
    width: 100%;
    height: 90rpx;
}

.vols_wrapper .vols_item {
    position: relative;
    flex: 0 0 90rpx;
    width: 90rpx;
    height: 90rpx;
    margin-right: 30rpx;
}

.vols_item image.headimg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.vols_item .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 24rpx;
    background: #fff;
    border-radius: 12rpx;
    border: 1rpx solid #e1e2e3;
}

.star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 4rpx;
    font-size: 0;
}

.star_wrapper .star:last-child {
    margin-right: 0;
}

.star_wrapper .star image {
    display: block;
    width: 12rpx;
    height: 12rpx;
}

.dialog_sec {
    width: 100%;
    height: auto;
    justify-content: flex-start;
}

.dialog_sec+.dialog_sec {
    margin-top: 30rpx;
}

.dialog_sec .dialog_vol {
    position: relative;
    flex: 0 0 72rpx;
    width: 72rpx;
    height: 72rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.dialog_vol image {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
}

.dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 72rpx;
    height: 20rpx;
    background: #fff;
    border: 1rpx solid #e1e2e3;
    border-radius: 10rpx;
}

.dialog_vol .star_wrapper .star {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 12rpx;
    margin-right: 2rpx;
}

.dialog_sec .dialog_detail {
    flex: auto;
    height: auto;
}

.dialog_detail .dialog_item {
    width: 100%;
    height: auto;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #e1e2e3;
}

.dialog_item .name,.sub_dialog_item .name {
    margin-bottom: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
}

.dialog_item .name text,.sub_dialog_item .name text {
    display: inline-block;
    margin-left: 30rpx;
    font-size: 24rpx;
    color: #999;
}

.dialog_item .txt,.sub_dialog_item .txt {
    font-size: 28rpx;
}

.dialog_detail .sub_dialog_sec {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e1e2e3;
}

.sub_dialog_sec .sub_dialog_vol {
    position: relative;
    flex: 0 0 52rpx;
    width: 52rpx;
    height: 52rpx;
    margin-right: 18rpx;
    align-self: flex-start;
}

.sub_dialog_vol image {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
}

.sub_dialog_vol .star_wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52rpx;
    height: 14rpx;
    background: #fff;
    border: 1rpx solid #e1e2e3;
    border-radius: 7rpx;
}

.sub_dialog_vol .star_wrapper .star {
    flex: 0 0 8rpx;
    width: 8rpx;
    height: 8rpx;
    margin-right: 2rpx;
}

.sub_dialog_vol .star_wrapper .star image {
    width: 8rpx;
    height: 8rpx;
}

.sub_dialog_item .txt .reply {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.no_dialog {
    width: 100%;
    height: 100rpx;
    background: #f4f4f4;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color: #b4b4b4;
}
</style>